<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { getCfgLeaveListApi, postCfgLeaveApi } from '@/common/apis/attendance'
import { message } from 'ant-design-vue';

// 请假规则数据
const takeLeaveData = ref<{ id: number; leaveType: number; isEnable: number }[]>([]);

// 使用 Record 来存储每个 id 的 checked 状态
const checked = ref<Record<number, boolean>>({});

// 定义映射表
const leaveTypeMap: { [key: number]: string } = {
    60000: '年假',
    60100: '事假',
    60200: '病假',
    60300: '婚假',
    60400: '丧假',
    60500: '产假',
    60600: '奖励产假',
    60700: '陪产假',
    60800: '探亲假',
    60900: '工伤假',
    61000: '调休假',
    61100: '产检假',
    61200: '流产假',
    61300: '长期病假',
};

const columns = [
    {
        title: '类型',
        dataIndex: 'leaveType',
    },
    {
        title: '是否可用',
        dataIndex: 'isEnable',
    },
];

// props
const props = defineProps({
    closeModel: {
        type: Function,
        required: true
    },
    departmentId: {
        type: Number,
        required: true
    }
})

// 工具函数：根据数字代码返回请假类型
function getLeaveTypeByCode(code: number): string {
    return leaveTypeMap[code] || '未知类型';
}

// 处理后的数据
const processedLeaveData = computed(() => {
    return takeLeaveData.value.map((item) => ({
        ...item,
        leaveType: getLeaveTypeByCode(item.leaveType), // 将数字代码转换为文字
    }));
});

// 获取请假规则数据
const getCfgLeaveListData = async () => {
    const res = await getCfgLeaveListApi({ departmentId: props.departmentId })
    takeLeaveData.value = res.data.data

    // 初始化 checked 状态
    takeLeaveData.value.forEach(item => {
        checked.value[item.id] = item.isEnable === 1;
    });
}

// 点击checked 状态
const handleSwitchChange = (id: number) => {
    console.log(id)
}

// 点击确定
const onSubmit = async () => {

    // 获取全部数据，包括未修改的部分
    const allData = takeLeaveData.value.map(item => {
        const isEnable = checked.value[item.id] ? 1 : 0; // 将 boolean 转换为 1 或 0
        return {
            ...item,
            isEnable, // 更新 isEnable 字段
        };
    });

    await postCfgLeaveApi(allData)
    // 重新渲染
    await getCfgLeaveListData()

    message.success('更新成功')

    // 关闭弹窗
    if (props.closeModel) {
        props.closeModel();
    }
}

// 侦听 departmentID 变化
watch(
    () => props.departmentId,
    (newVal) => {
        if (newVal) {
            console.log('departmentId发生变化', newVal)
            getCfgLeaveListData() // 重新获取数据
        }
    },
    { immediate: true }  // 立刻执行一次
)

</script>

<template>
    <a-space style="margin-bottom: 16px">
        假期类型
    </a-space>
    <a-table :columns="columns" :data-source="processedLeaveData" :pagination='false'>
        <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'isEnable'">
                <a-switch v-model:checked="checked[record.id]" @change="handleSwitchChange(record.id)" />
            </template>
        </template>
    </a-table>
    <!-- 确定按钮 -->
    <a-button type="primary" @click.prevent="onSubmit">保存更新</a-button>
</template>
